<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #demo {
            width: 200px;
            height: 200px;
            background-color: #6fff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <!-- 标签内 => 属性节点 -->
    <div id="demo" class="one two three" title="hello" data-index="0" data-msg="abc" abc="def">
        <span>hello div</span>
    </div>
</body>
<script>
    // 文档节点
    // 元素节点
    // 文本节点
    // 属性节点
    // 注释节点

    // document.getElementById()

    // 节点都是对象

</script>
<script>
    /* obj 对象   a,b,c对象的属性名  
    通过对象的属性名 => 从对象上取值和赋值  obj.a  obj["a"]
    var obj = { a: 1, b: 2, c: 3 }

    var num = 100;
    num.toString()
    num.toFixed(2) */


    var demo = document.getElementById("demo");
    // console.log(demo);

    // 前提: 
    // 1. 所有的节点 都是对象类型  => 元素节点也是对象类型
    // 2. 对象->对一个或一类事物特征(属性)和行为(方法)的描述 => 元素节点上也存在描述该元素的特征(属性)和行为(方法)
    // 3. console.dir() 以键值对的形式打印对象

    console.dir(demo);

    // 元素节点(html元素)的属性  => 元素节点也是对象类型 => 描述该元素的特征(属性)和行为(方法)  => 元素自带的属性

    // 语法:
    // 元素.属性名
    // 元素["属性名"]

    // demo.innerHTML
    // demo.innerText
    // demo.style


    // innerHTML   获取和设置元素内的html结构(字符串)
    // innerText   获取和设置元素内的text内容(字符串)
    // textContent 获取和设置元素内的text结构(渲染速度比innerText稍快)

    // outerHTML   获取和设置元素本身及其内部的html结构
    // outerText   获取和设置元素本身及其内部的文本结构

    // value       获取和设置表单元素的value值

    // console.log(demo.innerHTML);
    // console.log(demo.innerText);
    // console.log(demo.textContent);

    // console.log(demo.outerHTML);
    // console.log(demo.outerText);


    // id  获取和设置元素的id  => 元素节点的属性(元素本身的性质)
    // console.log(demo.id);  //取值
    // demo.id = "DEMO";  // 赋值

    // 昨天讲的  => 属性节点(存在于标签内) => 对应键名获取/设置键值
    // demo.setAttribute("id", "DEMO");
    // 可以理解为 只要属性存在于 标签内 => 此时作为属性节点 => setAttribute getAttribute


    // className  获取和设置元素的class名
    // console.log(demo.className);
    // demo.className = "ONE TWO THREE";

    // 昨天讲的  => 属性节点(存在于标签内) => 对应键名设置键值
    // demo.setAttribute("class", "ONE TWO THREE");


    // classList  获取元素的class名的集合
    // console.log(demo.classList);

    // title      获取和设置元素的title名
    // console.log(demo.title);
    // demo.title = "你好";

    // tagName   获取元素的标签名(大写字符串)
    // console.log(demo.tagName);
    // console.log(demo.tagName.toLowerCase());


    // dataset  获取设置元素的自定义属性(data-xxx开头)
    console.log(demo.dataset);
    console.log(demo.dataset.index);
    console.log(demo.dataset.msg);

    // console.log(demo.dataset.asd);
    // console.log(demo.asd);






    // console.log(demo);



</script>

</html>